<template>
    <section class="houseDetails-public-header-content RentSituation-box">
        <header>
            <img src="../../../../static/img/title-bg-img-left.jpg" alt="">
            <span>关于房租</span>
            <img src="../../../../static/img/title-bg-img-right.jpg" alt="">
        </header>
        <div class="content clearfix">
            <el-row>
                <div class="intuitive-data-title">
                    <header><i class="el-icon-location-outline"></i> 此区域关于房租回报的直观数据</header>
                    <div class="content clearfix">
                        <el-row>
                            <el-col :span="24">
                                <Zip_Zri_AllHomesPlusMultifamily_Summary></Zip_Zri_AllHomesPlusMultifamily_Summary>
                            </el-col>
                            <el-col :span="24">
                                <BreakEven_PR></BreakEven_PR>
                            </el-col>
                            <el-col :span="24">
                                <ZriForecast_Public></ZriForecast_Public>
                            </el-col>

                            <el-col :span="24">
                                <Zip_Zri_MultiFamilyResidenceRental_Summary></Zip_Zri_MultiFamilyResidenceRental_Summary>
                            </el-col>
                            <el-col :span="24">
                                <Zip_Zri_SingleFamilyResidenceRental_Summary></Zip_Zri_SingleFamilyResidenceRental_Summary>
                            </el-col>
                        </el-row>
                    </div>
                </div>

                <el-col :span="24">
                    <Zip_MedianRentalPrice_1Bedroom></Zip_MedianRentalPrice_1Bedroom>
                </el-col>
                <el-col :span="24">
                    <Zip_MedianRentalPrice_2Bedroom></Zip_MedianRentalPrice_2Bedroom>
                </el-col>
                <el-col :span="24">
                    <Zip_MedianRentalPrice_3Bedroom></Zip_MedianRentalPrice_3Bedroom>
                </el-col>
                <el-col :span="24">
                    <Zip_MedianRentalPrice_4Bedroom></Zip_MedianRentalPrice_4Bedroom>
                </el-col>
                <el-col :span="24">
                    <Zip_MedianRentalPrice_5BedroomOrMore></Zip_MedianRentalPrice_5BedroomOrMore>
                </el-col>
                <el-col :span="24">
                    <Zip_MedianRentalPrice_AllHomes></Zip_MedianRentalPrice_AllHomes>
                </el-col>
                <el-col :span="24">
                    <Zip_MedianRentalPrice_CondoCoop></Zip_MedianRentalPrice_CondoCoop>
                </el-col>
                <el-col :span="24">
                    <Zip_MedianRentalPrice_DuplexTriplex></Zip_MedianRentalPrice_DuplexTriplex>
                </el-col>
                <el-col :span="24">
                    <Zip_MedianRentalPrice_Mfr5Plus></Zip_MedianRentalPrice_Mfr5Plus>
                </el-col>
                <el-col :span="24">
                    <Zip_MedianRentalPrice_Sfr></Zip_MedianRentalPrice_Sfr>
                </el-col>
                <el-col :span="24">
                    <Zip_MedianRentalPrice_Studio></Zip_MedianRentalPrice_Studio>
                </el-col>
                <el-col :span="24">
                    <Zip_MedianRentalPricePerSqft_1Bedroom></Zip_MedianRentalPricePerSqft_1Bedroom>
                </el-col>
                <el-col :span="24">
                    <Zip_MedianRentalPricePerSqft_2Bedroom></Zip_MedianRentalPricePerSqft_2Bedroom>
                </el-col>
                <el-col :span="24">
                    <Zip_MedianRentalPricePerSqft_3Bedroom></Zip_MedianRentalPricePerSqft_3Bedroom>
                </el-col>
                <el-col :span="24">
                    <Zip_MedianRentalPricePerSqft_4Bedroom></Zip_MedianRentalPricePerSqft_4Bedroom>
                </el-col>
                <el-col :span="24">
                    <Zip_MedianRentalPricePerSqft_5BedroomOrMore></Zip_MedianRentalPricePerSqft_5BedroomOrMore>
                </el-col>
                <el-col :span="24">
                    <Zip_MedianRentalPricePerSqft_AllHomes></Zip_MedianRentalPricePerSqft_AllHomes>
                </el-col>
                <el-col :span="24">
                    <Zip_MedianRentalPricePerSqft_CondoCoop></Zip_MedianRentalPricePerSqft_CondoCoop>
                </el-col>
                <el-col :span="24">
                    <Zip_MedianRentalPricePerSqft_DuplexTriplex></Zip_MedianRentalPricePerSqft_DuplexTriplex>
                </el-col>
                <el-col :span="24">
                    <Zip_MedianRentalPricePerSqft_Mfr5Plus></Zip_MedianRentalPricePerSqft_Mfr5Plus>
                </el-col>
                <el-col :span="24">
                    <Zip_MedianRentalPricePerSqft_Sfr></Zip_MedianRentalPricePerSqft_Sfr>
                </el-col>
                <el-col :span="24">
                    <Zip_MedianRentalPricePerSqft_Studio></Zip_MedianRentalPricePerSqft_Studio>
                </el-col>

                <el-col :span="24">
                    <Zip_Zri_MultiFamilyResidenceRental></Zip_Zri_MultiFamilyResidenceRental>
                </el-col>
                <el-col :span="24">
                    <Zip_Zri_SingleFamilyResidenceRental></Zip_Zri_SingleFamilyResidenceRental>
                </el-col>

                <el-col :span="24">
                    <Zip_Zri_AllHomesPlusMultifamily></Zip_Zri_AllHomesPlusMultifamily>
                </el-col>
                <el-col :span="24">
                    <Zip_ZriPerSqft_AllHomes></Zip_ZriPerSqft_AllHomes>
                </el-col>

                <el-col :span="24">
                    <Affordability_Wide_2018Q2_Public_Rent></Affordability_Wide_2018Q2_Public_Rent>
                </el-col>

            </el-row>
        </div>
    </section>
</template>

<script>
    import Zip_Zri_AllHomesPlusMultifamily_Summary from './Zip_Zri_AllHomesPlusMultifamily_Summary.vue';//房租概况——租金同比环比增幅——文字说明
    import BreakEven_PR from './BreakEven_PR.vue';//房租概况——租售比——文字说明
    import ZriForecast_Public from './ZriForecast_Public.vue';//房租概况——租金涨幅百分比预测——文字说明

    import Zip_Zri_MultiFamilyResidenceRental_Summary from './Zip_Zri_MultiFamilyResidenceRental_Summary.vue';//房租概况——多家庭公寓中位租金同比环比增幅——文字说明
    import Zip_Zri_SingleFamilyResidenceRental_Summary from './Zip_Zri_SingleFamilyResidenceRental_Summary.vue';//房租概况——独栋别墅租金同比环比增幅——文字说明

    import Zip_MedianRentalPrice_1Bedroom from './Zip_MedianRentalPrice_1Bedroom.vue';//房租概况——所有一卧室房产中位租金——时间轴折线图
    import Zip_MedianRentalPrice_2Bedroom from './Zip_MedianRentalPrice_2Bedroom.vue';//房租概况——所有二卧室房产中位租金——时间轴折线图
    import Zip_MedianRentalPrice_3Bedroom from './Zip_MedianRentalPrice_3Bedroom.vue';//房租概况——所有三卧室房产中位租金——时间轴折线图
    import Zip_MedianRentalPrice_4Bedroom from './Zip_MedianRentalPrice_4Bedroom.vue';//房租概况——所有四卧室房产中位租金——时间轴折线图
    import Zip_MedianRentalPrice_5BedroomOrMore from './Zip_MedianRentalPrice_5BedroomOrMore.vue';//房租概况——所有五卧室及以上房产中位租金——时间轴折线图
    import Zip_MedianRentalPrice_AllHomes from './Zip_MedianRentalPrice_AllHomes.vue';//房租概况——所有房产房租中位数——时间轴折线图
    import Zip_MedianRentalPrice_CondoCoop from './Zip_MedianRentalPrice_CondoCoop.vue';//房租概况——所有公寓中位租金——时间轴折线图
    import Zip_MedianRentalPrice_DuplexTriplex from './Zip_MedianRentalPrice_DuplexTriplex.vue';//房租概况——所有双拼及三拼公寓联排中位租金——时间轴折线图
    import Zip_MedianRentalPrice_Mfr5Plus from './Zip_MedianRentalPrice_Mfr5Plus.vue';//房租概况——超过五室公寓的中位租金——时间轴折线图
    import Zip_MedianRentalPrice_Sfr from './Zip_MedianRentalPrice_Sfr.vue';//房租概况——所有独栋别墅中位租金——时间轴折线图
    import Zip_MedianRentalPrice_Studio from './Zip_MedianRentalPrice_Studio.vue';//房租概况——所有大开间中位租金——时间轴折线图
    import Zip_MedianRentalPricePerSqft_1Bedroom from './Zip_MedianRentalPricePerSqft_1Bedroom.vue';//房租概况——所有一卧室房产每平方英尺中位租金——时间轴折线图
    import Zip_MedianRentalPricePerSqft_2Bedroom from './Zip_MedianRentalPricePerSqft_2Bedroom.vue';//房租概况——所有二卧室房产每平方英尺中位租金——时间轴折线图
    import Zip_MedianRentalPricePerSqft_3Bedroom from './Zip_MedianRentalPricePerSqft_3Bedroom.vue';//房租概况——所有三卧室房产每平方英尺中位租金——时间轴折线图
    import Zip_MedianRentalPricePerSqft_4Bedroom from './Zip_MedianRentalPricePerSqft_4Bedroom.vue';//房租概况——所有四卧室房产每平方英尺中位租金——时间轴折线图
    import Zip_MedianRentalPricePerSqft_5BedroomOrMore from './Zip_MedianRentalPricePerSqft_5BedroomOrMore.vue';//房租概况——所有五卧室及以上房产每平方英尺中位租金——时间轴折线图
    import Zip_MedianRentalPricePerSqft_AllHomes from './Zip_MedianRentalPricePerSqft_AllHomes.vue';//房租概况——所有房产每平方英尺中位租金——时间轴折线图
    import Zip_MedianRentalPricePerSqft_CondoCoop from './Zip_MedianRentalPricePerSqft_CondoCoop.vue';//房租概况——所有公寓房产每平方英尺中位租金——时间轴折线图
    import Zip_MedianRentalPricePerSqft_DuplexTriplex from './Zip_MedianRentalPricePerSqft_DuplexTriplex.vue';//房租概况——所有双拼及三拼房产每平方英尺中位租金——时间轴折线图
    import Zip_MedianRentalPricePerSqft_Mfr5Plus from './Zip_MedianRentalPricePerSqft_Mfr5Plus.vue';//房租概况——所有五室以上公寓房产每平方英尺中位租金——时间轴折线图
    import Zip_MedianRentalPricePerSqft_Sfr from './Zip_MedianRentalPricePerSqft_Sfr.vue';//房租概况——所有独栋别墅房产每平方英尺中位租金——时间轴折线图
    import Zip_MedianRentalPricePerSqft_Studio from './Zip_MedianRentalPricePerSqft_Studio.vue';//房租概况——所有大开间房产每平方英尺中位租金——时间轴折线图

    import Zip_Zri_MultiFamilyResidenceRental from './Zip_Zri_MultiFamilyResidenceRental.vue';//房租概况——多家庭公寓中位租金——时间轴折线图
    import Zip_Zri_SingleFamilyResidenceRental from './Zip_Zri_SingleFamilyResidenceRental.vue';//房租概况——独栋别墅中位租金——时间轴折线图

    import Zip_Zri_AllHomesPlusMultifamily from './Zip_Zri_AllHomesPlusMultifamily.vue';//房租概况——所有房产中位租金——时间轴折线图
    import Zip_ZriPerSqft_AllHomes from './Zip_ZriPerSqft_AllHomes.vue';//房租概况——所有房产每平方英尺平均租金——时间轴折线图

    import Affordability_Wide_2018Q2_Public_Rent from './Affordability_Wide_2018Q2_Public_Rent.vue';//房租概况——租金占家庭收入的比重——大数据量面积折线图

    export default {
        data() {
            return {
                houseId: this.$route.query.houseId || null, //房源zip
                zip: this.$route.query.zip || null, //房源zip
            }
        },
        created() {
        },
        mounted() {
            this.$store.commit('set_houseDetailsZipcode', this.zip);
            //获取房源基本信息数据
            this.getHouseBasicInfo();
        },
        computed: {},
        methods: {
            //获取房源基本信息数据
            getHouseBasicInfo(){
                this.$get(`/house/${this.houseId}/basicInfo`).then(res => {
                    if (res.status == 0) {
                        // 房源详情页zil图表判断房源户型和几居室使用——房源基本信息
                        this.$store.commit('set_houseDetailsBasicInfo', res.data);
                    }else{
                        console.log(res.msg);
                    }
                });
            },
        },
        components: {
            Zip_Zri_AllHomesPlusMultifamily_Summary,//房租概况——租金同比环比增幅——文字说明
            BreakEven_PR,//房租概况——租售比——文字说明
            ZriForecast_Public,//房租概况——租金涨幅百分比预测——文字说明

            Zip_Zri_MultiFamilyResidenceRental_Summary,//房租概况——多家庭公寓中位租金同比环比增幅——文字说明
            Zip_Zri_SingleFamilyResidenceRental_Summary,//房租概况——独栋别墅租金同比环比增幅——文字说明

            Zip_MedianRentalPrice_1Bedroom,//房租概况——所有一卧室房产中位租金——时间轴折线图
            Zip_MedianRentalPrice_2Bedroom,//房租概况——所有二卧室房产中位租金——时间轴折线图
            Zip_MedianRentalPrice_3Bedroom,//房租概况——所有三卧室房产中位租金——时间轴折线图
            Zip_MedianRentalPrice_4Bedroom,//房租概况——所有四卧室房产中位租金——时间轴折线图
            Zip_MedianRentalPrice_5BedroomOrMore,//房租概况——所有五卧室及以上房产中位租金——时间轴折线图
            Zip_MedianRentalPrice_AllHomes,//房租概况——所有房产房租中位数——时间轴折线图
            Zip_MedianRentalPrice_CondoCoop,//房租概况——所有公寓中位租金——时间轴折线图
            Zip_MedianRentalPrice_DuplexTriplex,//房租概况——所有双拼及三拼公寓联排中位租金——时间轴折线图
            Zip_MedianRentalPrice_Mfr5Plus,//房租概况——超过五室公寓的中位租金——时间轴折线图
            Zip_MedianRentalPrice_Sfr,//房租概况——所有独栋别墅中位租金——时间轴折线图
            Zip_MedianRentalPrice_Studio,//房租概况——所有大开间中位租金——时间轴折线图
            Zip_MedianRentalPricePerSqft_1Bedroom,//房租概况——所有一卧室房产每平方英尺中位租金——时间轴折线图
            Zip_MedianRentalPricePerSqft_2Bedroom,//房租概况——所有二卧室房产每平方英尺中位租金——时间轴折线图
            Zip_MedianRentalPricePerSqft_3Bedroom,//房租概况——所有三卧室房产每平方英尺中位租金——时间轴折线图
            Zip_MedianRentalPricePerSqft_4Bedroom,//房租概况——所有四卧室房产每平方英尺中位租金——时间轴折线图
            Zip_MedianRentalPricePerSqft_5BedroomOrMore,//房租概况——所有五卧室及以上房产每平方英尺中位租金——时间轴折线图
            Zip_MedianRentalPricePerSqft_AllHomes,//房租概况——所有房产每平方英尺中位租金——时间轴折线图
            Zip_MedianRentalPricePerSqft_CondoCoop,//房租概况——所有公寓房产每平方英尺中位租金——时间轴折线图
            Zip_MedianRentalPricePerSqft_DuplexTriplex,//房租概况——所有双拼及三拼房产每平方英尺中位租金——时间轴折线图
            Zip_MedianRentalPricePerSqft_Mfr5Plus,//房租概况——所有五室以上公寓房产每平方英尺中位租金——时间轴折线图
            Zip_MedianRentalPricePerSqft_Sfr,//房租概况——所有独栋别墅房产每平方英尺中位租金——时间轴折线图
            Zip_MedianRentalPricePerSqft_Studio,//房租概况——所有大开间房产每平方英尺中位租金——时间轴折线图

            Zip_Zri_MultiFamilyResidenceRental,//房租概况——多家庭公寓中位租金——时间轴折线图
            Zip_Zri_SingleFamilyResidenceRental,//房租概况——多家庭公寓中位租金——时间轴折线图

            Zip_Zri_AllHomesPlusMultifamily,//房租概况——所有房产中位租金——时间轴折线图
            Zip_ZriPerSqft_AllHomes,//房租概况——所有房产每平方英尺平均租金——时间轴折线图

            Affordability_Wide_2018Q2_Public_Rent,//房租概况——租金占家庭收入的比重——%大数据量面积折线图

        }
    }
</script>

<style lang="less" type="text/less">
    .RentSituation-box {
        border-radius: 5px;
        overflow: hidden;
        position: relative;
        > header {
            display: flex;
            display: -webkit-flex;
            align-items: center;
            justify-content: center;
            > span {
                padding: 0 5px;
                font-size: 30px;
                color: #00bc84;
            }
            >img{
                display: inline-block;
                max-width: 100px;
            }
        }
        .intuitive-data-title{
            > header {
                padding: 13px 20px;
                background: #edf7ff;
                font-size: 18px;
                color: #242424;
                border-bottom: 1px solid #dee2e5;
                > i {
                    font-size: 20px;
                    color: #ff7500;
                }
            }
            >.content{
                width: 100%;
                position: relative;
                background: #fff;
                padding: 15px;
            }
        }
        >.content {
            padding: 15px;
            width: 100%;
            overflow: hidden;
            >.el-row {
                .el-col:first-of-type{
                    .echart-chart {
                        margin: 0;
                    }
                }
                .el-col {
                    padding: 0;
                    .echart-chart {
                        margin: 30px 0 0 0;
                        > .inside {
                            border: 1px solid #dee2e5;
                            padding: 0;
                            > header {
                                padding: 13px 20px;
                                background: #edf7ff;
                                font-size: 18px;
                                color: #242424;
                                border-bottom: 1px solid #dee2e5;
                                > i {
                                    font-size: 20px;
                                    color: #ff7500;
                                }
                            }
                            > .chartBox {
                                width: 100%;
                                text-align: center;
                                position: relative;
                                background: #fff;
                                >article {
                                    > .el-radio-group {
                                        padding: 15px 0;
                                        > .el-radio + .el-radio {
                                            margin-left: 15px;
                                        }
                                    }

                                    > .regionType-button {
                                        > div {
                                            padding: 10px;
                                            float: right;
                                        }
                                    }

                                    > .chart-div {
                                        width: 100%;
                                        height: 250px;
                                    }

                                    > p {
                                        color: #ff7b2c;
                                        text-align: left;
                                        margin: 5px 0;
                                        padding: 0 10px;
                                    }
                                }
                                > h4 {
                                    min-height: 100px;
                                    display: flex;
                                    justify-content: center;
                                    align-items: center;
                                    font-size: 20px;
                                    color: #000;
                                    text-align: center;
                                }
                                aside {
                                    text-align: left;
                                    padding: 20px;
                                    > p {
                                        line-height: 30px;
                                        color: #000;
                                        > span {
                                            color: #858585;
                                        }
                                    }
                                }
                            }
                        }
                    }
                }
            }
        }
    }
</style>

